<template>
  <view class="reason" @click="closeTooltip">
    <view class="line"><text></text></view>
    <view class="header">{{ title }}</view>
    <view class="content">
      <view class="faultContent">
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view class="name" style="margin-bottom: 20rpx">
            故障部件
            <text style="color: red">*</text>
          </view>
          <view style="font-size: 26rpx;padding-left: 14rpx;">
            {{ partsName }}
            <text v-if="partsName && floorStandNames">({{ floorStandNames.replaceAll(',','>') }})</text>
          </view>
        </view>
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view style="display: flex; justify-content: space-between;">
            <view class="name" style="margin-bottom: 20rpx; display: flex;">
              故障原因
              <text style="color: red">*</text>
              <zb-tooltip placement="bottom-start" ref="tooltip_0">
                  <image class="msg-img" src="@/static/images/index/q.png"></image>
                  <view class="tipsContent" slot="content" style="text-align:left;">
                      <view class="">导致电梯故障的具体原因是什么</view>
                  </view>
              </zb-tooltip>
            </view>
            <view style="color: #0091FF; margin-left: 8rpx; font-size: 24rpx; font-weight: normal;" @click="showExample(('finish_reason'))">示例</view>
          </view>
          <view class="">
            <view @click="chooseFault" :class="['falutReasonTitle',faultReasonItem.length?'faultAct':'']">
              选择原因
              <uni-icons :color="faultReasonItem.length?'#0091ff':'#ccc'" size="16" type="arrowright" />
              </view>
            <view v-if="faultReasonItem.length" class="chooseReason">
              已选原因:{{faultReasonItemNames.join('、') }}
              <text class="clear" @click="clearReason">清空</text>
            </view>
        
          </view>
          <input
            type="text"
            v-if="faultReasonItemNames&&faultReasonItemNames.includes('其他')"
            :placeholder="formFocus === 'other' ? '' : '示例：厅门地坎卡了碎石，导致厅门无法闭合'"
            class="other"
            v-model="faultReasonOtherDesc"
            @blur="formFocus = ''"
            @focus="formFocus = 'other'"
          />
        </view>
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view class="name" style="margin-bottom: 20rpx">
            配件更换
            <text style="color: red">*</text>
          </view>
          <view class="reasonContent">
            <view
              v-for="(item, index) in partList"
              :key="index"
              :class="partsOpe == item.value ? 'active' : ''"
              @click="partsOpe = item.value"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
        <view class="faultItem" style="margin-bottom: 24rpx">
          <view style="display: flex; justify-content: space-between;">
            <view class="name" style="display: flex;align-items: center;">
              故障说明
              <text style="color: #e02020;">*</text>
              <zb-tooltip placement="bottom-start" ref="tooltip_1">
                  <image class="msg-img" src="@/static/images/index/q.png"></image>
                  <view class="tipsContent" slot="content" style="text-align:left;">
                      <view class="">对电梯进行了什么维修操作，使电梯恢复正常运行</view>
                  </view>
              </zb-tooltip>
            </view>
            <view style="color: #0091FF; margin-left: 8rpx; font-size: 24rpx; font-weight: normal;" @click="showExample('finish_desc')">示例</view>
          </view>
          <view class="area" :style="{borderColor: formError.includes('faultDesc') ? '#e02020' : ''}">
            <textarea
              v-model="faultDesc"
              :placeholder="formFocus === 'faultDesc' ? '' : '示例：对厅门地坎进行了碎石清理，厅门闭合正常，电梯已恢复正常运行'"
              placeholder-class="textare"
              style="font-size: 28rpx; height: 150rpx; width: 100%"
              maxlength="200"
              :always-embed="true"
              @blur="formFocus = '',faultDesc ? '' : formError.push('faultDesc')"
              @focus="formError.includes('faultDesc') && formError.splice(formError.indexOf('faultDesc'), 1), formFocus = 'faultDesc'"
            />
            <view class="length">{{ faultDesc.length + "/200" }}</view>
          </view>
          <view v-if="formError.includes('faultDesc')" style="color: #e02020; font-size: 24rpx"
          >请输入故障说明</view>
        </view>
        <view class="faultItem">
          <view style="display: flex; justify-content: space-between;">
            <view class="name" style="margin-bottom: 24rpx; display: flex;">
              维修完成-图片/视频
              <text style="color: red">*</text>
              <zb-tooltip placement="bottom" ref="tooltip_2">
                  <image class="msg-img" src="@/static/images/index/q.png"></image>
                  <view class="tipsContent" slot="content" style="text-align:left;">
                      <view>进行维修操作后，</view>
                      <view style="color: #ffffff;">电梯或部件恢复正常运行的图片与视频</view>
                  </view>
              </zb-tooltip>
            </view>
            <view style="color: #0091FF; margin-left: 8rpx; font-size: 24rpx; font-weight: normal;" @click="showExample('finish_image')">示例</view>
          </view>
          <image-drag-sort
              tips="上传图片"
              :max="9"
              @changeList="changeImg"
              :list="faultImg"
            >
            </image-drag-sort>
        </view>
      </view>
    </view>
    <view class="bottom">
      <!-- <view class="cancle" @click="cancle">取消</view> -->
      <view class="comfire" @click="confirem">确定</view>
    </view>
  </view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import { falutReason } from '@/apis/repair.js';
import { removeEmpty } from '@/utils/utils';

export default {
	components: {
		ImageDragSort,
		
	},
	props: {
		list: {
			type: Array,
		},
		otherId: {
			type: String,
		},
		planId:{type:String}
	},
	data() {
		return {
			faultReasonItem: [],
			faultReasonOtherDesc: '',
			faultDesc: '',
			faultImg: [],
			id: '',
			title: '添加-维修结果',
			partsName: '',
			partList:[{
				value: 1,
				label: '无需更换'
			},{
				value: 2,
				label: '建议更换'
			},{
				value: 3,
				label: '已更换'
			}],
			partsOpe: 1,
			formFocus: '',
			formError: [],// 校验错误
			floorStandNames:'', // 层站name值
			faultReasonItemNames:[]  // 选中的名字
		};
	},
	watch: {
		// faultReasonItem: {
		// 	deep: true,
		// 	handler(newVal, oldVal) {
		// 		if (!newVal.includes(this.otherId)) {
		// 			this.faultReasonOtherDesc = '';
		// 		}
		// 	},
		// },
	},
	created() {
		
	},
	methods: {
		closeReasonDialog() {
			console.log('关闭');
			this.$refs.ReasonTreeDialog.$refs.faultTree.clear();
		},
		// 选择故障原因
		chooseFault() {  
			console.log('选择原因');
			uni.$once('getReason',(data)=> {
				console.log('获取数据父组件的数据',data);
				this.faultReasonItem = data.data.ids;
				this.faultReasonItemNames = data.data.names;
			});
			uni.$emit('updateFalut' + this.planId,{msg:this.faultReasonItem,name:'reasonModel',type:'open'});
		},
		clearReason() {
			console.log('清除');
			this.faultReasonItem = [];
			this.faultReasonItemNames = [];
		},
		// 回显
		checked(item, edit) {
			if (edit) {
				this.title = '修改-维修结果';
			} else {
				this.title = '添加-维修结果';
			}
			this.floorStandNames = item.floorStandNames || '';
			this.faultImg = item.faultImg ? item.faultImg : [];
			this.id = item.id;
			this.partsName = item.partsName; // 纯展示
			this.faultReasonItem = item.faultReasonItem
				? item.faultReasonItem.split(',')
				: [];
			this.faultReasonOtherDesc = item.faultReasonOtherDesc
				? item.faultReasonOtherDesc
				: '';
			this.partsOpe = item.partsOpe || 1;
			this.faultDesc = item.faultDesc ? item.faultDesc : '';
			this.faultReasonItemNames = item.faultReasonItemNames;
			// const filteredData = this.filterTreeByIDs(this.falutTreeList, this.faultReasonItem);
			// console.log(filteredData,this.faultReasonItem);
		},
    
		filterTreeByIDs(tree, ids, result = []) {
			tree.forEach(node => {
				if (ids.includes(String(node.id))) {
					result.push(node);
				}
				if (node.childList && node.childList.length > 0) {
					this.filterTreeByIDs(node.childList, ids, result);
				}
			});
			return result;
		},
		changeImg(val) {
			console.log(val, 'val的值');
			this.faultImg = val;
		},
		clearData() {
			(this.faultReasonItem = []), (this.faultReasonOtherDesc = '');
			this.faultDesc = '';
		},
		cancle() {
			this.$emit('cancle');
		},
		confirem() {
			this.formError = [];
			console.log(this.faultReasonItem, '确认');
			// 处理结果
			if (!this.faultReasonItem.length) {
				this.proofReason = true;
				uni.showToast({
					title: '请选择故障原因',
					icon: 'none',
				});
				return false;
			}
			if (this.faultReasonItemNames.includes('其他')) {
				if (!this.faultReasonOtherDesc) {
					this.proofReasonOther = true;
					uni.showToast({
						title: '请填写其他故障原因',
						icon: 'none',
					});
					return false;
				}
			}
			if (this.faultImg.length == 0) {
				this.proofReasonImg = true;
				uni.showToast({
					title: '请添加维修完成图片/视频',
					icon: 'none',
				});
				return false;
			}
			if (!this.faultDesc) {
				this.formError.push('faultDesc');
				uni.showToast({
					title: '请填写故障说明',
					icon: 'none',
				});
				return false;
			}
			const params = {
				id: this.id,
				faultImg: this.faultImg,
				faultReasonItem: this.faultReasonItem.join(','),
				faultReasonOtherDesc: this.faultReasonOtherDesc,
				faultDesc: this.faultDesc,
				partsOpe: this.partsOpe
			};
			this.$emit('comfire', params);
		},
		chooseItem(item, index) {
			if (!this.faultReasonItem.includes(item.dictKey)) {
				this.faultReasonItem.push(item.dictKey);
			} else {
				let faultIndex = this.faultReasonItem.findIndex(
					(e) => e == item.dictKey
				);
				this.faultReasonItem.splice(faultIndex, 1);
			}
		},
		showExample(type) {
			this.$emit('showExample', type);
		},
		closeTooltip() {
			// console.log(this.$refs['tooltip'],'this.$refs.tooltip');
			// this.$refs.tooltip.close();
			for (let index = 0; index < 3; index++) {
				if (this.$refs['tooltip_' + index]) {
					this.$refs['tooltip_' + index].close();
				}
			}
		}
	},
};
</script>

<style lang="scss" scoped>
.reason {
  width: 100%;
  // height: 670rpx;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  position: relative;
  padding: 20rpx 0;

  .line {
    margin-bottom: 18rpx;
    display: flex;
    justify-content: center;

    text {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  .header {
    font-size: #333;
    padding: 0 28rpx;
    padding-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.content {
  padding: 0 28rpx;

  .faultContent {
    .faultItem {
      .name {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        border-left: 4rpx solid #0091ff;
        padding-left: 10rpx;

        text {
          color: #999;
        }
      }

      .area {
        border: 2rpx solid #e9e9e9;
        padding: 20rpx;
        margin-top: 20rpx;

        .length {
          text-align: right;
          // padding-bottom: 20rpx;
          color: #ccc;
        }
      }

      .reasonContent {
        // margin-bottom: 52rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        view {
          width: 30%;
          height: 48rpx;
          margin-bottom: 20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 2rpx solid #cccccc;
          border-radius: 8rpx;
        }

        .active {
          color: #0091ff;
          border-color: #0091ff;
        }
      }

      .other {
        width: 100%;
        height: 80rpx;
        border: 2rpx solid #e9e9e9;
        border-radius: 4rpx;
        padding-left: 28rpx;
        box-sizing: border-box;
        margin-top: 24rpx;
      }
    }
  }
}

.bottom {
  // border-top: 2rpx solid #e9e9e9;
  padding: 0 28rpx;
  margin-top: 18rpx;
  // position: fixed;
  // bottom: 0;
  display: flex;

  .cancle {
    color: #999999;
    border-right: 2rpx solid #f5f5f5;
  }

  .comfire {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    font-size: 28rpx;
    color: #0091ff;
    background: #0091ff;
    border-radius: 8rpx;
    color: #fff;
  }
}
.msg-img{
  width: 28rpx;
  height: 28rpx;
  padding-top: 6rpx;
}
.falutReasonTitle{
  border-radius: 4px;
box-sizing: border-box;
border: 1px solid #ccc;
width: 216rpx;
height: 48rpx;
display: flex;
justify-content: center;
align-items: center;
color: #666;
}
.faultAct{
  border-color: #0091FF;
  color: #0091ff;
}

.chooseReason{
  color: #333;
  margin-top: 10rpx;
  .clear{
  margin-left: 16rpx;
  color: #0091FF;
}
}
</style>
